<template>
	<view class="home">
		
		<!-- 滚动 -->
		<scroll-view scroll-x class="scrollNav">
			<!-- 菜单 -->
			<!-- item.id 用于切换导航的内容 -->
			<view class="item" :class="index==navIndex ?'active':''" v-for="(item,index) in navArr" :key="item.categoryId"
				@click="clickNav(index,item.categoryId)">{{item.name}}
			</view>

		</scroll-view>
		<!-- 主题内容 -->
		<view class="content">
			<view class="row" v-for="item in newsArr" :key="item.id">
				<!-- 每一行的布局样式 -->
				<!-- 组件使用原生事件 -->
				<newsbox @click.native="goDetail(item)" :item="item"></newsbox>
			</view>
		</view>

		<!-- 没有数据时展现 -->
		<view class="nodata" v-if="!newsArr.length">
			<image src="../../static/images/noData.png" mode="widthFix"></image>
		</view>

		<!-- 数据加载中 -->
		<!-- 有数据才进行这个操作 -->
		<view class="loading" v-if="newsArr.length">
			<view v-if="loading == 1">数据加载中...</view>
			<view v-if="loading == 2">没有更多了~~</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用于切换导航选项
				navIndex: 0,
				// 导航栏标题
				navArr: [],
				// 新闻
				newsArr: [],
				// 导航栏标题（接口数据）
				// 栏目id，默认的栏目数据来源
				currentId: 50,
				// 分页
				currentPage: 1,
				// 数据加载状态
				loading: 0 // 0 默认 1加载中 2没有更多了
			}
		},
		// 生命周期，页面加载完毕时执行
		onLoad() {
			// 导航列表数据
			this.getNavData();
			// 新闻列表数据
			this.getNewsData();
		},

		// 触底
		// uniapp内置函数：上拉触底刷新
		onReachBottom() {
			// 判断如果loading为2
			// 就不再发送网络请求，加载无效数据
			if (this.loading == 2) {
				return;
			}

			this.currentPage++;
			this.loading = 1;
			// 重新加载新闻列表
			this.getNewsData();

		},
		onShow(e) {
			this.newsArr = [];
			this.getNewsData();
		},
		mounted() {
		},
		methods: {
			// 点击导航切换
			clickNav(index, id) {
				// 将导航的索引值传递给navindex
				this.navIndex = index;
				// 每次点击导航时，将页码归为1
				this.currentPage = 1;
				// 切换导航
				this.currentId = id
				// 切换页面时将前页面的数据清空
				this.newsArr = [];
				// 切换响应数据显示
				this.loading = 0
				// 
				this.getNewsData(id);
			},

			// 跳转到详情页
			goDetail(item) {
				// 跳转到页面，并且上一个页面保留
				uni.navigateTo({
					url: `/pages/detail/detail?newsId=${item.newsId}`
				})
			},

			// 获取导航列表标题
			getNavData() {
				uni.request({
					// 接口地址
					url: '/dev-api/system/categories/list',
					data:{pageNum: 1,pageSize: 10},
					method: "get",
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('Token'),
						'Content-Type': 'application/json;charset=utf-8'
					},
					success: res => {
						console.log(res.data.rows,"res.data.rows")
						this.navArr = res.data.rows;
					}
				})
			},

			// 获取新闻列表数据
			// 默认id为50 即为选中全部的内容
			// 是根据id的值来选择 需要展示的导航标题以及新闻列表
			// 详情见接口文档：
			// https://note.youdao.com/ynoteshare/index.html?id=67403c0c586166f508eb962d39a323c9&type=note&_time=1684219093326
			getNewsData(id) {
				uni.request({
					// 接口地址
					url: '/dev-api/system/news/list',
					data:{pageNum: this.currentPage,pageSize: 10,categoryId: id},
					method: "get",
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync('Token'),
						'Content-Type': 'application/json;charset=utf-8'
					},
					success: res => {
						const resData = res.data.rows || []
						console.log(resData,"新闻列表")
						// 判断传来的数据是不是为0
						// 为0 就改变loadding的值
						if (resData.length == 0) {
							this.loading = 2
						}
						this.newsArr = [...this.newsArr, ...resData]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scrollNav {
		height: 100rpx;
		background: #f7f8fa;
		// 不换行
		white-space: nowrap;
		position: fixed;
		// uniapp h5适应小程序 顶部顶格显示
		top: var(--window-top);
		left: 0;
		z-index: 10;

		.item {
			font-size: 40rpx;
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;
			cursor: pointer;

			&.active {
				color: #00aa00;
			}
		}

	}

	.content {
		padding: 30rpx;
		padding-top: 120rpx;

		.row {
			border-bottom: 1px dashed #efefef;
			padding: 15px 0;
		}
	}

	.nodata {
		display: flex;
		justify-content: center;

		image {
			width: 300rpx;
			height: 300rpx;
		}
	}

	.loading {
		text-align: center;
		font-size: 26rpx;
		color: #999;
		line-height: 2em;

	}
</style>